<template>
  <div class="delivery-orders">
    <div class="tabbar">
      <tabs v-model="active" color="#283C79" :swipe-threshold="6" @change="onTabChange">
        <tab title="全部"></tab>
        <tab title="待发货"></tab>
        <tab title="已发货"></tab>
        <tab title="已完成"></tab>
      </tabs>
    </div>

    <div class="product-list">
      <list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" ref="loadList">
        <div
          class="item product-item"
          @click="goToOrderDetail(item)"
          v-for="(item,index) in ordersList"
          :key="index"
        >
          <div class="number">
            <p>编号：{{item.orderNumber}}</p>
            <p>{{stateList[item.state]}}</p>
          </div>
          <div class="time">时间：{{item.dealTime}}</div>
          <product-item
            v-for="(i,n) in item.goods"
            :key="n"
            :cover="i.goodsImg ? staticHost + i.goodsImg : ''"
          >
            <div class="product-info" slot="product-item">
              <p>{{i.goodsName}}</p>
              <p>{{i.size}}</p>
              <p>
                <span class="single-price">￥{{i.price}}</span>
                <span>x {{i.num}}</span>
              </p>
            </div>
          </product-item>
          <div class="total">
            <p>
              共 {{item.goods.length}} 件商品，共：
              <span class="total-price">￥{{item.orderMoney}}</span>
            </p>
          </div>
        </div>
      </list>
    </div>
  </div>
</template>

<script>
import productItem from "../components/product_item.vue";
import { Tab, Tabs, List } from "vant";
import { staticHost } from "../service/HOST.js";

export default {
  components: {
    productItem,
    Tab,
    Tabs,
    List
  },
  data() {
    return {
      staticHost,
      active: Number(localStorage.getItem("tabbarIndex")) || "0",
      loading: false,
      finished: false,
      pageNumber: 1,
      pageSize: 10,
      ordersList: [],
      stateList: {
        0: "待支付",
        1: "待发货",
        2: "已发货",
        3: "已完成",
        4: "上级缺货"
      }
    };
  },
  beforeRouteLeave(to, from, next) {
    if (to.path == "/home/my") {
      localStorage.removeItem("tabbarIndex");
    }
    next()
  },
  methods: {
    onLoad() {
      let userType = "self";
      let orderType = "YT,ZG";
      let state = null;

      switch (this.active) {
        case 0: // 全部
          state = "";
          break;
        case 1: // 待发货
          state = 1;
          break;
        case 2: // 已发货
          state = 2;
          break;
        case 3: // 已完成
          state = 3;
          break;
      }

      this.$http
        .post(this.$urls.YCDDLB, {
          userType: userType,
          orderType: orderType,
          state: state,
          pageNumber: this.pageNumber,
          pageSize: this.pageSize
        })
        .then(res => {
          if (res.data.code == 200) {
            this.ordersList = this.ordersList.concat(res.data.data);

            this.pageNumber++;
            this.loading = false;
          } else if (res.data.code == 300) {
            this.loading = false;
            this.finished = true;
          }
        });
    },
    // 顶部 tab切换时
    onTabChange(index) {
      this.active = index;
      localStorage.setItem("tabbarIndex", this.active);

      this.loading = false;
      this.finished = false;
      this.pageNumber = 1;
      this.pageSize = 10;
      this.ordersList = [];

      setTimeout(() => {
        this.$refs.loadList.check();
      }, 100);
    },
    goToOrderDetail(item) {
      this.$router.push({
        path: "/order_detail",
        query: {
          orderType: "carryAdd",
          orderNumber: item.orderNumber
        }
      });
    }
  }
};
</script>

<style scoped>
.tabbar {
  position: sticky;
  top: 0;
}

.product-list {
  margin-top: 5px;
}

.product-info {
  padding-left: 10px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.product-info > p:last-child {
  flex: 1;
  display: flex;
  align-items: flex-end;
}

.product-item {
  background-color: #fff;
  padding: 10px 0;
}
.item {
  margin-bottom: 5px;
}

.total,
.number,
.time {
  padding: 0 15px;
}
.number {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.number > p:last-child {
  font-size: 0.9rem;
  background-color: #9bb9d6;
  color: #fff;
  padding: 1px 6px;
  border-radius: 4px;
}

.time {
  margin-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-between-color);
}

.total {
  margin-top: 10px;
  text-align: right;
}

.single-price {
  padding-right: 10px;
}

.single-price,
.total-price {
  color: var(--money-up);
}
</style>